<!DOCTYPE html>
<html>
    <head>
        <title>Floor</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
            }
        </style> 
        <script src="../../../../lib/core/ht.js"></script>         
        <script src="../../../../lib/plugin/ht-xeditinteractor.js"></script>   
        <script>                
                         
            ht.Default.setImage('floor1', '');
            ht.Default.setImage('floor2', '');
            ht.Default.setImage('grass', '');

            function init(){                                 
                dataModel = new ht.DataModel();                
                g3d = new ht.graph3d.Graph3dView(dataModel);   
                g2d = new ht.graph.GraphView(dataModel);                   
                mainSplit = new ht.widget.SplitView(g3d, g2d, 'v', 0.4);   
                
                view = mainSplit.getView();  
                view.className = 'main';
                document.body.appendChild(view);    
                window.addEventListener('resize', function (e) {
                    mainSplit.invalidate();
                }, false);                         
              
                g3d.setGridVisible(true); 
                g3d.setEye(0, 400, 400);                          
                
                g2d.translate(400, 160);      
                g2d.setZoom(0.6, true);
                g2d.setEditable(true);                
                g2d.setHelperEditableFunc(function(data, helper) {
                    return false;                    
                });
                
                floor1 = new ht.Shape();
                dataModel.add(floor1);                   
                floor1.setPoints([
                    {x: 200, y: 50},
                    {x: 400, y: 50},
                    {x: 500, y: 200},
                    {x: 100, y: 200}
                ]); 
                floor1.translate(-100, -100);
                floor1.setClosePath(true); 
                floor1.setThickness(-1);
                floor1.setTall(10);
                floor1.setElevation(floor1.getTall()/2);
                floor1.s({
                    'shape.border.width': 5,
                    'shape.border.color': 'yellow',
                    'shape.repeat.image': 'floor1',
                    'repeat.uv.length': 256,
                    'shape3d.color': 'yellow',
                    'shape3d.top.image': 'floor1',
                    'shape3d.bottom.image': 'floor1'
                });                 
                
                floor2 = new ht.Shape();
                dataModel.add(floor2);                   
                floor2.setPoints([
                    {x: 96, y: 209}, 
                    {x: 43, y: 211}, 
                    {x: -1, y: 199}, 
                    {x: 7, y: 126},
                    {x: 54, y: 127}, 
                    {x: 41, y: 89}, 
                    {x: 98, y: 60}, 
                    {x: 114, y: 95},
                    {x: 159, y: -3}, 
                    {x: 290, y: 66}, 
                    {x: 251, y: 137}, 
                    {x: 296, y: 155},
                    {x: 289, y: 199}, 
                    {x: 260, y: 213}, 
                    {x: 149, y: 213}, 
                    {x: 77, y: 261}
                ]); 
                floor2.setClosePath(true);
                floor2.setSegments([1, 2, 4, 4, 4, 4, 2, 2]);
                floor2.translate(-400, -100);
                floor2.setThickness(-1);
                floor2.setTall(30);
                floor2.setElevation(floor2.getTall()/2);
                floor2.s({
                    'shape.border.width': 10,
                    'shape.repeat.image': 'floor2',
                    'repeat.uv.length': 64,
                    'shape3d.top.image': 'floor2',
                    'shape3d.bottom.image': 'floor2'
                });                                 
    
                grass = new ht.Shape();
                dataModel.add(grass);   
                grass.setThickness(-1);
                grass.setPoints([
                    {x: -400, y: -200},
                    {x: 400, y: -200},
                    {x: 400, y: -100},
                    {x: -400, y: -100}
                ]);
                grass.setClosePath(true);                 
                grass.setTall(1);
                grass.setElevation(1);
                grass.s({
                    'shape.border.width': 0,
                    'shape.repeat.image': 'grass',
                    'repeat.uv.length': 128,
                    'shape3d.visible': false,                    
                    'shape3d.bottom.visible': false,
                    'shape3d.top.image': 'grass',
                    'shape3d.reverse.flip': true
                }); 
                
            }             
            
        </script>
    </head>
    <body onload="init();">                                
    </body>
</html>
